import React from 'react'
import { Space, List, Switch } from 'antd-mobile'
import '../css/1.scss'
import { Button, Input, Form } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { Image, NavBar, Toast } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import {post} from '../../../axios/request'
import {
  UnorderedListOutline,
  PayCircleOutline,
  SetOutline,
} from 'antd-mobile-icons'
import { useState } from 'react'
export default function Loginpwd() {
  let navigate = useNavigate()
  const [form] = Form.useForm()
  const [phoneid,setPhoneid]=useState('')
  const [code1,setCode1]=useState('')
  const [code2,setCode2]=useState('')
  const [pwd,setPwd]=useState('')
  const onFinish = values => {
    console.log(values)
  }

  // 获取短信验证码
  const getcode=async()=>{
    let {data}=await post('/getcode',{phoneid})
    // console.log(data);
    setCode1(data)
  }

  const handleKeyDown=(e)=>{
    console.log(e.keyCode);
    if(e.keyCode==13){
      if(code1==code2){
        Toast.show('验证码正确')
      }else{
        Toast.show('验证码不正确')
      }
    }else{
      console.log('不是enter');
    }
   
  }

  const editpwd=async()=>{
      let data=await post('/setpwd',{phoneid,pwd})
      console.log(data);
      navigate('/contmain')
      Toast.show('密码修改成功')
  }
  return (
    <div id='loginpwd'>
      <div className="top">
        <NavBar
          style={{ backgroundColor: '#FFFFFF' }}
          back={
            <>
              <ArrowLeft />
              返回
            </>
          }
          onBackClick={() => { navigate(-1) }}
        >
          设置登录密码
        </NavBar>
        {/* <ArrowLeft></ArrowLeft> */}
      </div>
      <div className="cen">
        <Form
          form={form}
          onFinish={onFinish}
          footer={

            <Button onClick={()=>{editpwd()}} round nativeType='submit' style={{ backgroundColor: '#2D83FB', color: 'white', width: '8rem', marginLeft: '0.8rem', marginTop: '0.2667rem' }} block>确定</Button>

          }
        >
          <Form.Item
            rules={[{ required: true, message: '请输入手机号' }]}
            // name='pid'
            label='+86'
          >
            <Input onChange={(e)=>{setPhoneid(e)}} placeholder='请输入手机号' />
          </Form.Item>
          <Form.Item
            // rules={[{ required: true, message: '请输入验证码' }]}
            name='checkcode'
            label='验证码'
          >
            <Input onKeyDown={handleKeyDown}  onChange={(e)=>{setCode2(e)}} placeholder='请输入验证码' />
            <span onClick={()=>{getcode()}}>获取验证码</span>
          </Form.Item>

          <Form.Item
            rules={[{ required: true, message: '请输入新密码' }]}
            // name='pwd'
            label='密码'
          >
            <Input onChange={(e)=>{setPwd(e)}} placeholder='请输入密码' />

          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
